/**
 * 通用头部CSS
 *
 * @link    http://zhouhuajian.website
 * @package zhouhuajian.website
 * @author  zhouhuajian
 * @version v1.0
 */
.head-wrap {
    float: left;
    box-sizing: border-box;
    padding: 15px 0;
    width: 100%;
    background: #dea787;
    color: #707075;
    overflow-x: hidden;
}

.head-wrap .logo {
    float: left;
    font-family: 华文隶书, sans-serif;
    font-size: 26px;
    font-weight: 900;
    color: #264c5f;
    padding: 0 26px;
    height: 60px;
    line-height: 60px;
}

.head-wrap .nav {
    box-sizing: border-box;
    height: 60px;
    padding: 15px;
    float: right;
}
.head-wrap .nav a {
    float: left;
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
    font-weight: 800;
    color: #254c5f;
}
.head-wrap .nav a:hover {
    -webkit-animation: nav-btn-animate 2.67s linear 0s infinite;
    animation: nav-btn-animate 2.67s linear 0s infinite;
}
@-webkit-keyframes nav-btn-animate {
    50% {
        color: rgba(37, 76, 95, 0.4);
    }
}
@keyframes nav-btn-animate {
    50% {
        color: rgba(37, 76, 95, 0.4);
    }
}

/* AnimateCSS */
:root {
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1;
}
.animate__animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: var(--animate-duration);
    animation-duration: var(--animate-duration);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes flash {
    from,
    50%,
    to {
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0;
    }
}
@keyframes flash {
    from,
    50%,
    to {
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0;
    }
}
.animate__flash {
    -webkit-animation-name: flash;
    animation-name: flash;
}
@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
.animate__fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}
.animate__animated.animate__delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-delay: var(--animate-delay);
    animation-delay: var(--animate-delay);
}